<!-- <template>
    <div class="app-container">
      <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px" :label-position="labelPosition">
        <el-form-item label="客户" prop="khmc">
          <el-select
            v-model="formQuery.khmc"
            placeholder="请选择客户"
            clearable
            filterable
            @keyup.enter.native="enterClick"
            :loading="selectClient8Loading"
          >
            <el-option
                v-for="(item, index) in selectClientList"
                :key="index"
                :label="item.khmc"
                :value="item.khmc"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库" prop="ckid">
          <el-select
            v-model="formQuery.ckid"
            placeholder="请选择"
            clearable
            filterable
            @keyup.enter.native="enterClick"
            :loading="selectWarehouse14Loading"
          >
            <el-option
                v-for="item in selectWarehouseList"
                :key="item.spckid"
                :label="item.spckmc"
                :value="item.spckid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date">
            <el-date-picker
                v-model="date"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChange()">
                </el-date-picker>
        </el-form-item>  
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="memberManageCilentList"
      >
        <af-table-column label="日期" prop="adddate" />
        <af-table-column label="客户名称" prop="khmc" />
        <af-table-column label="库位" prop="spckmc" />
        <af-table-column label="项目" prop="fyxm" />
        <af-table-column label="收费单价" prop="ckdj" />
        <af-table-column label="收费类型" prop="sflx" />
        <af-table-column label="计费数量" prop="fysl" />
        <af-table-column label="计费单位" prop="fydw" />
        <af-table-column label="金额" prop="fyje" />
      </el-table>
       <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="getList"
        />
    </div>
  </template>
  
  <script>
  import { getFeeSettlement } from "@/api/storage/warehouseLease/feeSettlement";
  import { selectWarehouse14 } from "@/api/storage/warehouse"
  import { selectClient8 } from "@/api/storage/customer"
  
  export default {
    name: "FeeSettlement",
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        //表格加载
        loading:true,
         //对齐
        labelPosition: "right",
        //日期
        date:"",
        //客户加载
        selectClient8Loading: true,
        //仓库加载
        selectWarehouse14Loading: true,
        // 查询参数
        queryParams: {
            khmc:"",
            ckid:"",
            t1:"",
            t2:""
        },
        //客户列表
        selectClientList: [],
        //库存列表
        selectWarehouseList: [],
        // 费用结算列表
        feeSettlementList: [],
        //页数
        pageSize: 10,
        //页码
        pageNum:1,
        // 总条数
        total: 0,
      };
    },
    created() {
      this.getList()
    },
    methods: {
        /**获取客户 */
      clientSelect() {
        this.selectClient8Loading=true
        selectClient8({}).then(response => {
            this.selectClientList = response.data;
            this.selectClient8Loading=false
        });
      },
       /**获取仓库 */
      stockSelect() {
        this.selectWarehouse14Loading=true
        selectWarehouse14({}).then(response => {
            this.selectWarehouseList = response.data;
            this.selectWarehouse14Loading=false
        });
      },
      /** 查询费用结算 */
      getList() {
        this.loading = true
        getFeeSettlement(this.queryParams, {pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
          this.feeSettlementList = response.rows;
          this.total = response.total;
          this.loading = false
        })
      },

      /**日期 */
      dateChange() {
        this.queryParams.t1 = this.date[0]
        this.queryParams.t2 = this.date[1]
        this.getList()
      },
  
      /**enter键触发 */
      enterClick(e) {
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.reset()
        this.getList()
      },
      reset() {
        Object.assign(this.$data, this.$options.data())
      },
    }
  };
  </script>
   -->